<template>
  <div class="container">
    <!--给导航栏设置fixed，使得固定定位-->
    <van-nav-bar fixed title="搜索结果" left-arrow @click-left="$router.back()"/>
    <!-- 瀑布流加载 -->
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了"
              @load="onLoad">
      <van-cell v-for="item in searchList" :key="item.art_id.toString()" :title="item.title"/>
    </van-list>
  </div>
</template>
<script>
import { apiSearchList } from '@/api/search.js'
export default {
  name: 'search-result',
  data () {
    return {
      // 瀑布相关
      list: [],
      loading: false,
      finished: false,

      page: 1, // 页码
      searchList: [] // 根据关键字获得的文章列表信息
    }
  },
  // created () {
  //   this.getSearchList()
  // },
  methods: {

    // 获得文章
    // async getSearchList () {
    //   const args = { q: this.$route.params.keywords }
    //   const result = await apiSearchList(args)
    //   this.searchList = result.results
    // },
    // 瀑布加载
    async onLoad () {
      await this.$sleep(800)
      const args = { q: this.$route.params.keywords, page: this.page }
      const result = await apiSearchList(args)

      // 去除瀑布加载动画效果
      this.loading = false
      // 判断如果没有数据就停止加载
      if (!result.results.length) {
        this.finished = true
        return false
      }
      // 有获取到数据
      // data追加
      this.searchList.push(...result.results)
      // 分页累加
      this.page++
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      // setTimeout(() => {
      //   for (let i = 0; i < 10; i++) {
      //     this.list.push(this.list.length + 1)
      //   }

      //   // 加载状态结束
      //   this.loading = false

      //   // 数据全部加载完成
      //   if (this.list.length >= 40) {
      //     this.finished = true
      //   }
      // }, 1000)
    }
  }
}
</script>

<style scoped lang='less'>
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  box-sizing: border-box;
  .van-list {
    flex: 1;
    margin-top: 92px;
  }
}
</style>
